<template>
    <view class="app">
        <load :ready="ready"></load>
		
		<view class="ibox">
			<view class="goods-list">
				<view class="goods-item">
					<u-image src="/static/12.jpeg" border-radius="16" width="128" height="128"></u-image>
					<view class="info">
						<view class="goods-name txt-hide">现货-鱼跃8F-5AW制氧机 5升医用</view>
						<view class="attr">鱼跃9F-5W升级轻音款（双人吸氧+雾化）</view>
						<view class="desc">
							<view class="price">¥<text>890.00</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-form :model="form" ref="uForm" label-width="140">
			
		<view class="ibox">
			<u-form-item label="开票类型" >
				<view class="form-item-info">
					电子发票
				</view>
			</u-form-item>
			<u-form-item label="发票类型" :border-bottom="false">
				<view class="form-item-info">
					普通发票(单位)
				</view>
			</u-form-item>
		</view>
		
		<view class="switch-wrap">
			<view class="int">
				<view class="label">开票信息：</view>
				<view class="txt-hide">广州至隆软件广州至隆软件</view>
			</view>
		</view>
		
		<!-- 个人 -->
		<view class="ibox" v-if="billType == 1">
			<u-form-item label="姓名：">
				<view class="form-item-info">
					凉白开
				</view>
			</u-form-item>
			<u-form-item label="邮箱："  :border-bottom="false">
				<view class="form-item-info">
					164782521@qq.com
				</view>
			</u-form-item>
		</view>
		
		<!-- 公司 -->
		<view class="ibox"  v-if="billType == 2">
			<u-form-item label="发票抬头：" label-width="160">
				<view class="form-item-info">
					广州至隆软件科技有限公司
				</view>
			</u-form-item>
			<u-form-item label="纳税人识别号：" label-width="300" >
				<view class="form-item-info">
					441345620220248564
				</view>
			</u-form-item>
			<u-form-item label="单位地址：" label-width="160">
				<view class="form-item-info">
					广州市白云区永泰学山创意园
				</view>
			</u-form-item>
			<u-form-item label="单位联系电话：" label-width="240">
				<view class="form-item-info">
					020-9548847
				</view>
			</u-form-item>
			<u-form-item label="开户行：" label-width="160" :border-bottom="false">
				<view class="form-item-info">
					广州市白云区永泰学山创意园
				</view>
			</u-form-item>
		</view>
		
		
		<u-gap height="160"></u-gap>
		<view class="btnbox fixed">
			<u-button type="primary" shape="circle" :custom-style="btnStyle">确认申请</u-button>
		</view>
		</u-form>
		
		
		
		<u-modal v-model="showDelivery" :show-confirm-button="true" :show-cancel-button="true" confirm-text="确认" content="请确认商品已配齐后再进行配送"></u-modal>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
			showDelivery:false,
			form:{},
			btnStyle:this.$config.btnStyle,
			typeList:[{
				label: '普通发票(个人)',
				name:1,
			},{
				label: '普通发票(单位)',
				name:2,
			}],
			billType: 1,
        };
    },
    onLoad() {
        that = this;
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    onShow() {
        // #ifdef H5
        this.$common.h5SetTitle('');
        // #endif
    },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		submit(){
			this.$common.showTip('申请成功请耐心等待平台处理')
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		},
		handleTab(e){
			this.tab = e;
		},
		change(e){
			this.current = e;
		},
        submit() {
            console.log('submit')
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    console.log('验证通过');
                } else {
                    console.log('验证失败');
                }
				
            });
        },
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: #F8FAFD;
}

.ibox{
	background: #fff;
	margin: 16rpx 32rpx;
	border-radius: 12px;
	padding: 0 32rpx;
}
.switch-wrap{
	margin: 16rpx 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.int{
		border: 1px solid $color;
		border-radius: 5px;
		width: 100%;
		padding: 0 20rpx;
		display: flex;
		height: 48px;
		align-items: center;
	}
	.txt-hide{
		flex: 1;
		color: $color;
	}
	.icon{
		width: 20px;
		height: 20px;
	}
	.btn-add{
		background: $color;
		color: #fff;
		height: 48px;
		line-height: 48px;
		font-size: 14px;
		margin: 0;
		width: 25%;
	}
}
.form-item-info{
	text-align: right;
	width: 100%;
}
.goods-list{
	border: 0;
}
</style>
